﻿<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>幸福里花卉-登录</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <!-- Favicon -->
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="assets/images/favicon.png"
    />

    <!-- CSS
	============================================ -->

    <!-- Bootstrap CSS -->
    <!-- <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css"> -->

    <!-- Icon Font CSS -->
    <!-- <link rel="stylesheet" href="assets/css/vendor/plazaicon.css">
    <link rel="stylesheet" href="assets/css/vendor/themify-icons.css">
    <link rel="stylesheet" href="assets/css/vendor/font-awesome.min.css"> -->

    <!-- Plugins CSS -->
    <!-- <link rel="stylesheet" href="assets/css/plugins/animate.css">
    <link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css">
    <link rel="stylesheet" href="assets/css/plugins/select2.min.css"> -->

    <!-- Helper CSS -->
    <link rel="stylesheet" href="assets/css/helper.css" />

    <!-- Main Style CSS -->
    <!-- <link rel="stylesheet" href="assets/css/style.css"> -->

    <!--====== Use the minified version files listed below for better performance and remove the files listed above ======-->
    <link rel="stylesheet" href="assets/css/plugins-min/plugins.min.css" />
    <link rel="stylesheet" href="assets/css/style.min.css" />
    <link rel="stylesheet" href="assets/css/element.css" />
  </head>

  <body>
    <div class="main-wrapper" id="app">
      <!--Header Section Start-->
      <div class="header-section d-none d-lg-block">
        <div class="main-header">
          <div class="container position-relative">
            <div class="row align-items-center">
              <div class="col-lg-9">
                <div class="header-logo">
                  <a href="index.html"
                    ><img src="assets/images/logo/logo.png" alt="" style="width: 150px; height: 80px;"
                  /></a>
                </div>
              </div>
              <div class="col-lg-3">
                <span>欢迎登录幸福里花卉</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Header Section End-->

      <div class="overlay"></div>
      <!--Overlay-->

      <!--Page Banner Start-->
      <div
        class="page-banner"
        style="background-image: url(assets/images/testimonial-bg.jpg);"
      >
        <div class="container">
          <div class="page-banner-content text-center">
            <h2 class="title">登录</h2>
            <ol class="breadcrumb justify-content-center">
              <li class="breadcrumb-item"><a href="index.html">首页</a></li>
              <li class="breadcrumb-item active" aria-current="page">登录</li>
          </ol>
          </div>
        </div>
      </div>
      <!--Page Banner End-->

      <!--Login Start-->
      <div class="login-page section-padding-5">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-6">
              <div class="login-register-content">
                <h4 class="title">登录到您的帐户</h4>
                <div class="login-register-form">
                  <!-- <form action="#">
                                    <div class="single-form">
                                        <label>手 机 号</label>
                                        <input type="text">
                                    </div>
                                    <div class="single-form">
                                        <label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                                        <input type="password">
                                    </div>
                                    <div class="single-form">
                                        <button class="btn btn-primary btn-block">登 录</button>
                                    </div>
                                    <div class="single-form d-flex justify-content-between">
                                        <div class="cus-checkbox">
                                            <input type="checkbox" id="remember">
                                            <label for="remember"><span></span> 记住我</label>
                                        </div>
                                        <div class="forget">
                                            <a href="forget.html">忘记密码</a>
                                        </div>
                                    </div>
                                    <div class="single-form">
                                        <label>还没有账户?</label>
                                        <a href="register.html" class="btn btn-dark btn-block">立即创建账户</a>
                                    </div>
                                </form> -->
                  <el-form
                    @submit.native.prevent
                    :model="ruleForm"
                    status-icon
                    :rules="rules"
                    ref="ruleForm"
                    class="demo-ruleForm"
                  >
                    <el-form-item label="账号" prop="username">
                      <el-input
                        v-model="ruleForm.username"
                        auto-complete="off"
                        placeholder="手机号"
                        class="input-with-select"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                      <el-input
                        type="password"
                        v-model="ruleForm.password"
                        auto-complete="off"
                        @keyup.enter.native="loginSubmit('ruleForm')"
                        show-password
                        placeholder="请输入密码"
                      >
                      </el-input>
                    </el-form-item>
                    <div class="single-form d-flex justify-content-between">
                      <div class="cus-checkbox">
                        <input type="checkbox" id="remember" />
                        <label for="remember"><span></span> 记住我</label>
                      </div>
                      <div class="forget">
                        <a href="forget.html">忘记密码</a>
                      </div>
                    </div>
                    <div class="single-form">
                      <label>还没有账户?</label>
                      <a href="register.html" class="btn btn-dark btn-block"
                        >立即创建账户</a
                      >
                    </div>
                    <el-form-item>
                      <!-- <el-button
                        type="primary"
                        @click="loginSubmit('ruleForm')"
                        style="width: 100%"
                        >登录
                      </el-button> -->
                      <div class="single-form">
                        <button class="btn btn-primary btn-block" @click="loginSubmit('ruleForm')">登 录</button>
                    </div>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Login End-->

      <!--Footer Section Start-->
      <div class="footer-area">
        <div class="container">
            <div class="footer-widget-area section-padding-6">
                <div class="row justify-content-between">

                    <!--Footer Widget Start-->
                    <div class="col-lg-4 col-md-6">
                        <div class="footer-widget">
                          <img src="assets/images/logo/logo.png" alt="" style="width: 230px;height: 120px;">
                            <!--  -->
                        </div>
                        <!--Footer Widget End-->
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <div class="footer-widget">
                            <h4 class="footer-widget-title">信息</h4>
                            <div class="footer-widget-menu">
                                <ul>
                                    <li><a></a></li>
                                    <li><a></a></li>
                                    <li><a>常见问题</a></li>
                                    <li><a>商店地址</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <div class="footer-widget">
                            <h4 class="footer-widget-title">账户</h4>

                            <div class="footer-widget-menu">
                                <ul>
                                    <li><a>法律声明</a></li>
                                    <li><a>安全条款</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <div class="footer-widget">
                            <h4 class="footer-widget-title">帮助</h4>

                            <div class="footer-widget-menu">
                                <ul>
                                    <li><a>常见问题</a></li>
                                    <li><a>定价方案</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <div class="footer-widget">
                            <h4 class="footer-widget-title">顾客服务</h4>
                            <div class="footer-widget-menu">
                                <ul>
                                    <li><a>我的账户</a></li>
                                    <li><a>使用条款</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
      <!--Footer Section End-->

      <!--Back To Start-->
      <a  class="back-to-top">
        <i class="fa fa-angle-double-up"></i>
      </a>
      <!--Back To End-->
    </div>

    <!-- JS
    ============================================ -->

    <!-- Modernizer JS -->
    <script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
    <!-- jQuery JS -->
    <script src="assets/js/vendor/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap JS -->
    <!-- <script src="assets/js/vendor/popper.min.js"></script>
    <script src="assets/js/vendor/bootstrap.min.js"></script> -->

    <!-- Plugins JS -->
    <!-- <script src="assets/js/plugins/swiper-bundle.min.js"></script>
    <script src="assets/js/plugins/jquery.countdown.min.js"></script>
    <script src="assets/js/plugins/jquery.elevateZoom.min.js"></script>
    <script src="assets/js/plugins/select2.min.js"></script> -->

    <!--====== Use the minified version files listed below for better performance and remove the files listed above ======-->
    <script src="assets/js/plugins.min.js"></script>

    <!-- Main JS -->
    <script src="assets/js/main.js"></script>

    <!-- Google Map js -->
    
    <script src="assets/js/map-script.js"></script>

    <script src="assets/js/lib/vue.js"></script>
    <script src="assets/js/lib/index.js"></script>
    <script src="assets/js/lib/axios.min.js"></script>

    <script type="module">
      //   import { baseUrl } from "../service/index.js";
      //   import { Account } from "./api/login.js";
      //   import regex from "../../utils/helper/regexHelper.js";

      const vm = new Vue({
        // 配置对象 options
        // 配置选项(option)
        el: "#app", // element: 指定用vue来管理页面中的哪个标签区域
        data() {
          let validateMobile = (rule, value, callback) => {
            if (!value) {
              return callback(new Error("手机号码不能为空"));
            } else {
              if (!regex.testMobileNo(value)) {
                callback(new Error("手机号码格式不正确"));
              }
            }
            callback();
          };
          return {
            ruleForm: {
              username: "",
              password: "",
              phoneType: "+86"
            },
            rules: {
              username: [
                { required: true, message: "账号不能为空", trigger: "blur" },
                { validator: validateMobile, trigger: "blur" }
              ],
              password: [
                { required: true, message: "请输入密码", trigger: "blur" },
                {
                  min: 6,
                  max: 15,
                  message: "必须包含大小写字母和数字的组合，不能使用特殊字符",
                  trigger: "blur"
                }
              ],
              phoneType: [{ required: true }]
            },
            checked: false
          };
        },
        methods: {
          onChange(e) {
            console.log(e);
            this.ruleForm.phoneType = e;
          },
          // 登录
          loginSubmit(e) {
            this.$refs.ruleForm.validate(valid => {
              if (valid) {
                let params = {
                  username:
                    this.ruleForm.phoneType + " " + this.ruleForm.username,
                  password: this.ruleForm.password,
                  grantType: "password"
                };
                Account.login(
                  params,
                  function(data, _this) {
                    console.log(data);
                    localStorage.setItem("username", data.username);
                    localStorage.setItem("nickname", data.nickname);
                    localStorage.setItem("token_type", data.token_type);
                    localStorage.setItem("access_token", data.access_token);
                    _this.$message({
                      message: "登录成功",
                      type: "success"
                    });
                    setTimeout(() => {
                      window.open("./index.html", "_self");
                      window.close();
                    }, 1000);
                  },
                  this
                );
              } else {
                return false;
              }
            });
          }
        }
      });
    </script>
  </body>
</html>
